import classnames from 'classnames'
import React from 'react'
import { Image, Text, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import debounce from 'lodash.debounce'
import { Calendar } from './types/Calendar'
import * as constant from './common/constant'

const MAP: { [key: number]: string } = {
  [constant.TYPE_PRE_MONTH]: 'pre',
  [constant.TYPE_NOW_MONTH]: 'now',
  [constant.TYPE_NEXT_MONTH]: 'next'
}

export interface Props {
  list: Calendar.List<Calendar.Item>

  showMark?: boolean

  onClick?: (item: Calendar.Item) => void

  onLongClick?: (item: Calendar.Item) => void
}

export default class DateList extends React.Component<Props> {
  constructor(props: Props) {
    super(props)
    this.handleClick = debounce(this.handleClick, 400, { leading: true, trailing: false })
  }

  private handleClick = (item: Calendar.Item): void => {
    if (item.type !== 0) return
    if (typeof this.props.onClick === 'function') {
      this.props.onClick(item)
    }
  }

  private handleLongClick = (item: Calendar.Item): void => {
    if (item.type !== 0) return
    if (typeof this.props.onLongClick === 'function') {
      this.props.onLongClick(item)
    }
  }

  public render(): JSX.Element | null {
    const { list, showMark } = this.props
    if (!list || list.length === 0) return null
    return (
      <View className="at-calendar__list flex">
        {list.map((item: Calendar.Item) => {
          const { mark, type, value, isToday, isActive, isSelected, isDisabled } = item
          return (
            <View
              key={`list-item-${value}`}
              onClick={() => this.handleClick(item)}
              onLongPress={() => this.handleLongClick(item)}
              className={classnames(
                'flex__item',
                `flex__item--${MAP[type]}`,
                {
                  'flex__item--today': isToday,
                  'flex__item--mark': showMark,
                  'flex__item--active': isActive,
                  'flex__item--selected': isSelected,
                  'flex__item--blur':
                    isDisabled
                    || type === constant.TYPE_PRE_MONTH
                    || type === constant.TYPE_NEXT_MONTH,
                }
              )}
            >
              <View className={classnames('flex__item-container', {
                'flex__item-container__mark': showMark && isToday && !isSelected && !isActive
              })}
              >
                <View className="container-text">{isToday ? '今' : item.text}</View>
              </View>
              {mark?.icon && <Image src={Images.dataCenter.icon_menstruation} className="flex__item-icon" />}
              {showMark && mark && (
                <View className="flex__item-extra">
                  <Text className={classnames('markText', { markText_grey: mark.isGrey })}>
                    {mark.text}
                  </Text>
                </View>
              )}
            </View>
          )
        })}
      </View>
    )
  }
}
